import React, { memo, useState,useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { Layout, Menu, message,Badge } from 'antd'
import WechatImage from './wechatImage'
import './index.css'
export default memo(function TopHeader(props) {
  const { Header, Content, Footer } = Layout
  const history = useHistory()
  const [hoverWhich, setHoverWhich] = useState(null)
  let [dot,setDot] = useState(false)
  function messageError() {
    message.error('暂未开发')
  }
  useEffect(() => {
    setDot(props.newMessageCount)
  }, [props.newMessageCount])

  function mycenter(){
      history.replace("/home/myCenter") 
      props.setnewMessageCount(0)
  }
  return (
    <div style={{ position: 'fixed', width: '100%', zIndex: 99 }}>
      <Header onMouseLeave={() => setHoverWhich(null)}>
        {/* <div className="logo" /> */}
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['3']}>
          <Menu.Item key="1" className="profileTab" onClick={() => { history.replace("/home/classIndex") }} onMouseEnter={() => setHoverWhich(1)}>
            <i className="iconfont icon-shijie"></i> 小世界
          </Menu.Item>
          <Menu.Item key="2" className="profileTab" onClick={() => { history.replace("/home/schoolIndex") }} onMouseEnter={() => setHoverWhich(2)}>
            <i className="iconfont icon-xiaoyuangonggao"></i> 校园圈
          </Menu.Item>
          <Menu.Item key="3" className="profileTab" onClick={() => { history.replace("/home/classIndex") }} onMouseEnter={() => setHoverWhich(3)}>
            <i className="iconfont icon-banjiguanli"></i> 班级圈
          </Menu.Item>
          <Menu.Item key="4" onMouseEnter={() => setHoverWhich(4)}>
            <i className="iconfont icon-xiaochengxu"></i> uooki小程序
            {hoverWhich === 4 &&<WechatImage visible={hoverWhich}></WechatImage>}
          </Menu.Item>
          <Menu.Item key="5"  onClick={() => { history.replace("/home/setting/permission") }}>
            <i className="iconfont icon-shezhi"></i> 我的设置
          </Menu.Item>
          <Menu.Item key="6" onClick={mycenter.bind(this)}>
            <i className="iconfont icon-gerenzhongxin"></i> <Badge dot={dot}>个人中心</Badge>
          </Menu.Item>
          <div className="profile text-gray-700 w-full absolute top-16 left-0 right-0 flex justify-around shadow-xl bg-white" style={{ zIndex: 98 }}>
            <div className="bg-logo bg-cover w-12 h-12 rounded overflow-hidden absolute left-36 top-1/2 transform -translate-y-1/2"></div>
            <ul className='absolute font-black left-1/2 top-1/2 w-1/2 h-10 leading-10 transform -translate-x-1/2 -translate-y-1/2  flex justify-between tab-nav'>
              {
                hoverWhich === 1 && <>
                  <li onClick={messageError.bind(this)}>暂无</li>
                </>
              }
              {
                hoverWhich === 2 && <>
                  <li onClick={() => { history.replace("/home/schoolIndex/thingLost") }}>失物招领</li>
                  <li onClick={messageError.bind(this)}>校园委托</li>
                  <li onClick={() => { 
                    // message.warning('内灰测试中，敬请期待～')
                    history.replace("/home/schoolIndex/confession/confessionCards")
                     }}>表白墙</li>
                  <li onClick={() => { history.replace("/home/schoolIndex/secondHand") }}>二手转让</li>
                  {/* <li onClick={messageError.bind(this)}>一元盲盒</li> */}
                </>
              }
              {
                hoverWhich === 3 && <>
                  <li onClick={() => { history.replace("/home/class/homework") }}>我的作业</li>
                  <li onClick={() => { history.replace("/home/class/studyInfo") }}>青年大学习</li>
                  <li onClick={messageError.bind(this)}>班级通知</li>
                  <li onClick={messageError.bind(this)}>班级动态</li>
                  <li onClick={messageError.bind(this)}>发动态</li>
                  <li onClick={messageError.bind(this)}>发吐槽</li>
                </>
              }
            </ul>
          </div>
        </Menu>
      </Header>
    </div>
  )
  //<div className='w-full h-9 bg-gray-800'></div>;
})
